<template>
  <Modal
    v-model="showModal"
    :title="title"
    scrollable
    class="modal-container"
    @on-visible-change="close"
  >
    <slot name="body">
      是否确认删除该条数据？
    </slot>
    <div slot="footer">
      <slot name="footer">
        <div class="btn-container">
          <Button v-if="showOk" type="primary" @click="ok">确认</Button>
          <Button v-if="showCancel" @click="close">{{cancelText}}</Button>
        </div>
      </slot>
    </div>
  </Modal>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '系统提示'
    },
    showOk: {
      type: Boolean,
      default: true
    },
    showCancel: {
      type: Boolean,
      default: true
    },
    cancelText: {
      type: String,
      default: '取消'
    }
  },
  data() {
    return {
      showModal: true
    }
  },
  methods: {
    close() {
      this.$emit('update:show', false)
      this.$emit('cancel')
    },
    ok() {
      this.close()
      this.$emit('ok')
    }
  }
}
</script>